<template>
  <div :class="prefixCls">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
    name: 'QuillEditor',
    components: {
        quillEditor
    },
    props: {
        prefixCls: {
            type: String,
            default: 'ant-editor-quill'
        },
        // 表单校验用字段
        // eslint-disable-next-line
        value: {
            type: String
        }
    },
    data() {
        return {
            content: null,
            editorOption: {
                // some quill options
            }
        }
    },
    methods: {
        onEditorBlur(quill) {
            console.log('editor blur!', quill)
        },
        onEditorFocus(quill) {
            console.log('editor focus!', quill)
        },
        onEditorReady(quill) {
            console.log('editor ready!', quill)
        },
        onEditorChange({ quill, html, text }) {
            console.log('editor change!', quill, html, text)
            this.$emit('change', html)
        }
    },
    watch: {
        value(val) {
            this.content = val
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../index.less');

/* 覆盖 quill 默认边框圆角为 ant 默认圆角，用于统一 ant 组件风格 */
.ant-editor-quill {
    /deep/ .ql-toolbar.ql-snow {
        border-radius: @border-radius-base @border-radius-base 0 0;
    }
    /deep/ .ql-container.ql-snow {
        border-radius: 0 0 @border-radius-base @border-radius-base;
    }
}
</style>
